import React, { memo } from "react";
import { useSelector, shallowEqual } from "react-redux";
import { RankingWrapper } from "./style";
import RankingItem from "@/components/ranking-item";

export default memo(function TopRanking() {
  const { topList } = useSelector(
    (state) => ({
      topList: state.getIn(["ranking", "topList"]),
    }),
    shallowEqual
  );

  return (
    <RankingWrapper>
      {topList.map((item, index) => {
        let header;
        if (index === 0 || index === 4) {
          header = index === 0 ? <h2>云音乐特色榜</h2> : <h2>全球媒体榜</h2>;
        }
        return (
          <RankingItem
            item={item}
            header={header}
            key={item.id}
            index={index}
          />
        );
      })}
    </RankingWrapper>
  );
});
